<template>
  <intro-view :usage="usage">
    <p>【default】direction: up,  autoplay: 4000, speed: 500, height: 16px</p>
    <ui-roll-notice :items="items" style="height: 16px; background: #cccccc; padding: 0 5px;">
      <template slot-scope="{item}">
        <ui-roll-notice-item style="height: 16px">{{item}}</ui-roll-notice-item>
      </template>
    </ui-roll-notice>

    <p>【default】direction: up, visibleCount="4"  autoplay: 4000, speed: 500, height: 64px</p>
    <ui-roll-notice :items="items" direction="up" visibleCount="4" style="height: 64px; background: #cccccc;">
      <template slot-scope="{item}">
        <ui-roll-notice-item style="height: 16px">{{item}}</ui-roll-notice-item>
      </template>
    </ui-roll-notice>

    <p>【default】direction: left, visibleCount="4"  autoplay: 4000, speed: 500, width: 64px</p>
    <ui-roll-notice :items="items2" direction="left" visibleCount="4" style="width: 64px; background: #cccccc; margin: 0 auto">
      <template slot-scope="{item}">
        <ui-roll-notice-item style="display: inline-block; width: 16px">{{ item }}</ui-roll-notice-item>
      </template>
    </ui-roll-notice>

    <p>【default】direction: down, visibleCount="4"  autoplay: 4000, speed: 500, height: 64px</p>
    <ui-roll-notice :items="items" direction="down" visibleCount="4" style="height: 64px; background: #cccccc;">
      <template slot-scope="{item}">
        <ui-roll-notice-item style="height: 16px">{{item}}</ui-roll-notice-item>
      </template>
    </ui-roll-notice>

    <p>【default】direction: right, visibleCount="4"  autoplay: 4000, speed: 500, width: 64px</p>
    <ui-roll-notice :items="items2" direction="right" visibleCount="4" style="width: 64px; background: #cccccc; margin: 0 auto;">
      <template slot-scope="{item}">
        <ui-roll-notice-item style="display: inline-block; width: 16px">{{ item }}</ui-roll-notice-item>
      </template>
    </ui-roll-notice>
  </intro-view>
</template>

<script>
  /* eslint-disable */
  import usage from './usage.md'
  export default {
    data () {
      return {
        usage,
        items: ['共创美好未来0', '共创美好未来1', '共创美好未来2', '共创美好未来3', '共创美好未来4'],
        items2: [0,1,2,3,4]
      }
    },
    methods: {
      clickMe () {
        console.log('111')
      }
    }
  }
</script>
